<template>
	<view class="wrapper safe-area">
		<!--头部-->
		<view class="capital-header main-flex">
			<view class="capital-header-l">
				<picker
					mode="date"
					:value="queryDate"
					fields="month"
					@change="bindDateChange">
					<view class="capital-header-date main-flex">
						<view class="capital-header-date-text">{{queryDate}}</view>
						<uni-icons type="down" size="20" color="#333"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
		<!--内容-->
		<view class="capital-content">
			<view class="capital-list">
				<view class="capital-item main-flex" v-for="item in tableList" :key="item.id">
					<image class="capital-item-icon" src="/static/images/icon/jf_icon.png"></image>
					<view class="capital-item-l main-flex-item">
						<view class="capital-item-text">{{item.remark}}</view>
						<view class="capital-item-time">{{item.createTime}}</view>
					</view>
					<view class="capital-item-num" :class="`money-type${jfAddTypeList.indexOf(item.type) > -1 ? '1' : '0'}`">
						<text>{{jfAddTypeList.indexOf(item.type) > -1 ? '+' : '-'}}</text>
						<text>{{Math.abs(item.integral)}}</text>
					</view>
					<!-- <view class="capital-item-right">
						<uni-icons type="right" size="20" color="#333"></uni-icons>
					</view> -->
				</view>
			</view>
			<!--加载-->
			<view
				v-if="isNull"
				class="null main-flex">
				<u-empty text="数据为空" icon="/static/images/null.png"></u-empty>
			</view>
			<view
				v-else
				class="more main-flex">
				<uni-load-more :status="status" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { throttle, debounce, timeFormat } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'
import { jfAddTypeList } from '@/utils/config'
import { integralList } from "@/api/app_api/user"

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// 年月选择
	const queryDate = ref(timeFormat(new Date(), 'yyyy-mm'))
	const bindDateChange = (e) => {
		queryDate.value = e.detail.value
		searchFirst()
	}
	
	// 列表查询
	const tableList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	
	const searchFirst = () => {
		tableList.value = []
		status.value = 'loading'
		isNull.value = false
		getList()
	}
	
	const getList = () => {
		isLoading.value = true
		// uni.showLoading({
		// 	title: '数据加载中...'
		// })
		integralList({
			queryDate: queryDate.value
		}).then(res => {
			tableList.value = res.data || []
			status.value = 'no-more' 
			isNull.value = tableList.value.length === 0
			isLoading.value = false
			// uni.hideLoading()
		}).catch(() => {
			isLoading.value = false
			isNull.value = false
			// uni.hideLoading()
		})
	}
	
	onLoad(() => {
		searchFirst()
	})
</script>

<style lang="scss">
	.capital {
		&-header {
			position: fixed;
			width: 100%;
			height: 72rpx;
			background-color: #ffffff;
			padding: 0 20rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			z-index: 10;
			&-date {
				&-text {
					margin-right: 10rpx;
				}
			}
			&-r {
				margin-left: auto;
				color: $error-color;
			}
		}
		&-content {
			padding: 92rpx 20rpx 20rpx;
		}
		&-list {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 0 20rpx;
		}
		&-item {
			padding: 20rpx 0;
			&+.capital-item {
				border-top: 1px solid $line-color;
			}
			&-icon {
				width: 48rpx;
				height: 48rpx;
			}
			&-l {
				padding: 0 20rpx;
			}
			&-text {
				font-size: 26rpx;
			}
			&-time {
				font-size: 24rpx;
				color: $text-light;
			}
			&-num {
				font-size: 28rpx;
				font-weight: 600;
			}
			&-r {
				margin-left: 20rpx;
			}
			.money-type0 {
				color: $error-color;
			}
			.money-type1 {
				color: $suceess-color;
			}
		}
	}
</style>
